<!-- 开完工产品统计 -->
<template>
  <div class="container-statist">
    <div class="production-statist bgc-fff">
      <div class="flex-ac content-between mb-15">
        <div class="flex-ac">
          <line-logo :name="$i18n.t('mesProduceStatistic.statisticsOfCompletionProduct')" />
          <el-tooltip class="item" effect="dark" placement="top">
            <template #content>
              <span class="font-14">{{ $i18n.t("mesProduceStatistic.planForTheCompletionPlanOfTheWorkOrder") }}</span>
            </template>
            <div class="query_icon ml-8">?</div>
          </el-tooltip>
        </div>
        <el-select v-model="setType" class="ml-16 w-320" :placeholder="$i18n.t('mesProduceStatistic.select')" @change="handleType">
          <el-option v-for="item in statistOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="content-center">
        <div v-if="!noData" class="pieChart" ref="pieChart"></div>
        <el-empty v-else :image-size="200"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import LineLogo from "./line-logo.vue";
import * as echarts from "echarts";
export default {
  components: { LineLogo },
  props: {
    setType: {
      type: Number,
      default: 1,
    },
    dataLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      statistOptions: [
        { label: $i18n.t('mesProduceStatistic.startStatistics'), value: 1 },
        { label: $i18n.t('mesProduceStatistic.completionStats'), value: 2 },
      ],
      options: {},
      noData:false,
      chart: null,
    };
  },
  methods: {
    handleType(val) {
      this.$emit("update:setType", val)
      this.$parent.getFinishStatistics()
    },
    init(data) {
      this.option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["50%", "50%"],
            roseType: "radius",
            label: {
              show: true,
              position: "outside",
              fontSize: 12,
              formatter: '{b} \n{c} {d}%',
            },
            labelLine: {
              length: 10,
              length2: 30,
            },
            itemStyle: {
              borderRadius: 8
            },
            data: data.map((item) => {
              return {
                value: item.finishnumber,
                name: item.prodName
              };
            }),
          },
        ],
      };
      this.$nextTick(() => {
        this.chart = echarts.init(this.$refs.pieChart);
        this.chart.setOption(this.option);
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.container-statist {
  width: calc(50% - 5px);
  background: #fff;
  margin-top: 12px;

  .production-statist {
    padding: 12px 10px 20px;

    .query_icon {
      width: 16px;
      height: 16px;
      background: #93b0cb;
      opacity: 1;
      font-size: 12px;
      color: #ffffff;
      text-align: center;
      line-height: 16px;
      border-radius: 50%;
      cursor: pointer;
    }

    .flex-ac {
      display: flex;
      align-items: center;
    }

    .pieChart {
      width: 100%;
      height: 380px;
    }

    .content-between {
      justify-content: space-between;
    }

    .content-center {
      text-align: center;
    }
  }
}
</style>
